<!DOCTYPE HTML>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Layout 5</title>
		<style>
		body {
	margin: 0;
	padding: 20px;
	background-color: #999;
	color: #fff;
	font: 87.5%/1.4 HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Georgia","Times New Roman",serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 328.571%;
    margin-bottom: 0.2em;
}

h1.title {
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

h2 {
    font-size: 250%;
    margin-bottom: 0.2em;
    text-align:center;
}

h3 {
    font-size: 150%;
    margin-bottom: 0.2em;
}

p {
	margin:0;
	padding: 0 0 1em 0;
}

.box {
    background-color: #ddd;
    padding: 10px 10px 1px;
    color: #444;
    box-sizing:border-box;
}


.wrapper {	 
  width: 90%;
  margin: 0 auto 0 auto;
  display:grid;
  grid-template-columns: 1fr (gutter) repeat(16, (col) 4.25fr (gutter) 1fr );
  grid-template-rows: repeat(9, (row) auto (gutter) 20px );
}



.header { 
  grid-column: col / span gutter 16; 
  grid-row: row / span 1;
} 

.side1 { 
  grid-column: col / span gutter 4; 
  grid-row: row 2 / span 1;
  /*height: 100%;*/
}

.content { 
  grid-column: col 5 / span gutter 8; 
  grid-row: row 2 / span 1;
  /*height: 100%;*/
}

.side2 { 
  grid-column: col 13 / span gutter 4; 
  grid-row: row 2 / span 1;
  /*height: 100%;*/
}

.footer { 
  grid-column: col / span gutter 16; 
  grid-row: row 3 / span 1;
}
</style>
      </head>
	<body>
	<h1 class="title">Flexible Grid</h1>
	
	<div class="wrapper">
		<header class="header box"><h2>Usefulness of Cats</h2></header>
		<aside class="side1 box"><p>At the office of The Morning Advertiser, I am informed by my old friend Mr. Charles Williams, they boast of a race of cats bred there for nearly half a century. In colour these are mostly tortoiseshell, and some are very handsome.</p></aside>
		<article class="content box">
			<p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p>

			<p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p>

		</article>
		<aside class="side2 box"><p>Let any one have a plague of rats and mice, as I once had, and let them be delivered therefrom by cats, as I was, and they will have a lasting and kind regard for them.</p></aside>
		<footer class="footer box"><p>This layout brought to you by the CSS3 Grid Layout Module.</p></footer>
	</div>
	<script src="../../bin/css-polyfills.min.js"></script>
	</body>
</html>